<template>
  			<footer class="footer">
				<!-- This should be `0 items left` by default -->
				<span class="todo-count"><strong>{{unDoneTodoList}}</strong> 剩余未完成</span>
				<!-- Remove this if you don't implement routing -->
				<ul class="filters" @click="typeList">
					<li>
						<a href="#/" :class="{selected:type=='all'}" @click="type='all'">全部</a>
					</li>
					<li>
						<a href="#/active" :class="{selected:type=='no'}" @click="type='no'">未完成</a>
					</li>
					<li>
						<a href="#/completed" :class="{selected:type=='yes'}"  @click="type='yes'">已完成</a>
					</li>
				</ul>
				<!-- Hidden if no completed items are left ↓ -->
				<button class="clear-completed" v-if='arr.length>0' @click="delTodo">清除已完成</button>
			</footer>
</template>

<script>
export default {
  data(){
    return{
      type:'all'
    }
  },
  props:['arr'],
  computed: {
    unDoneTodoList(){
      // return console.log(this.arr);
     return this.arr.filter(item=>{return item.isDone===false}).length
    }
  },
  methods:{
    typeList(){
      this.$emit('typeList',this.type)
    },
    delTodo(){
      this.$emit('delListFn')
    }
  }
}
</script>

<style>

</style>